<template>
  <template v-if="!item.children">
    <router-link :to="item.path">
      <el-menu-item :index="item.key">
        <el-icon>
          <SvgIcon
            v-if="item.icon"
            :iconClass="item.icon"
            className="svgStyle"
          />
        </el-icon>
        <template #title> {{ item.name }}</template>
      </el-menu-item>
    </router-link>
  </template>
  <template v-else>
    <el-sub-menu :index="item.key">
      <template #title>
        <el-icon>
          <SvgIcon
            v-if="item.icon"
            :iconClass="item.icon"
            className="svgStyle"
          />
        </el-icon>
        <span>{{ item.name }}</span>
      </template>
      <!--开始递归-->
      <menuItem
        v-for="route in item.children"
        :key="route.key"
        :item="route"
      ></menuItem>
    </el-sub-menu>
  </template>
</template>

<script>
import SvgIcon from "@/components/SvgIcon.vue";
export default {
  name: "menuItem", // 名称必须定义，递归的时候会用到。
  components: { SvgIcon },
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style>
.svgStyle {
  width: 20px !important;
  height: 20px !important;
  color: #fff;
}

a {
  text-decoration: none;
  color: #fff;
}
</style>
